<template>
  <div>
    <MerchantForm @search="search" :is-loading="btnLoading" ref="merchantFormRef" />
    <!-- add -->
    <div class="add">
      <el-button icon="Plus" type="primary" @click="add()">新增国外商家</el-button>
    </div>
    <div class="table-box">
      <el-table border v-loading="loadingData" :data="tableData">
        <el-table-column v-for="(item, index) in tableProps" :key="index" :prop="item.prop" :label="item.label"
          align="center" :width="item.width || ''">
          <template #default="scope" v-if="item.prop == 'client_status'">
            <span
              :style="{ color: scope.row.client_status === 1 ? 'var(--el-color-success)' : 'var(--el-color-danger)' }">{{
                status_list[scope.row.client_status] }}</span>
          </template>
          <template #default="scope" v-if="item.prop == 'device_num'">
            <span class="device-num" :style="{ color: 'var(--el-color-primary)' }" @click.stop="showDevice(scope.row)">{{
              scope.row.device_num }}</span>
          </template>
          <template #default="scope" v-if="item.prop == 'handle'">
            <el-button type="primary" size="small" @click.stop="add(scope.row.client_no)">编辑</el-button>
            <el-button type="primary" size="small" @click.stop="toDetails(scope.row.client_no)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page flexCenter">
      <el-pagination background layout="prev, pager, next,jumper,total" @current-change="pageChange" @prev-click="pageChange"
        @next-click="pageChange" :total="state.count" :page-size="state.searchLimit.limit" />
    </div>
    <!-- 设备明细 -->
    <DeviceDetail ref="deviceDetailRef" />
  </div>
</template>
<script setup>
import MerchantForm from './components/MerchantForm.vue';
import DeviceDetail from './components/DeviceDetail.vue';
import { ref, reactive, onBeforeMount, onMounted, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { merchantList } from '@/api/merchantManage/merchantManage';
import { ElMessage } from 'element-plus';
const router = useRouter();
const deviceDetailRef = ref(null)
const merchantFormRef = ref(null)
const loadingData = ref(false);
const btnLoading = ref(false);
const tableData = ref([]);
const status_list = ref({})
const state = reactive({
  form: {
  },
  searchLimit: {
    page: 1,
    limit: 20
  },
  count: 0
})
const tableProps = ref([
  { prop: 'client_no', label: '编号' },
  { prop: 'client_name', label: '商家名称' },
  { prop: 'short_name', label: '商家简称' },
  { prop: 'belong_country', label: '所属国家' },
  { prop: 'device_num', label: '关联设备', width: 120 },
  { prop: 'create_time', label: '创建日期' },
  { prop: 'client_status', label: '状态', width: 120 },
  { prop: 'handle', label: '操作', width: 160 }
])

// methods
const add = (client_no) => {
  router.push({ name: 'MerchantAdd', query: { client_no: client_no } })
}

const toDetails = (client_no) => {
  router.push({ name: 'MerchantDetail', query: { client_no } })
}

const search = async (form) => {
  btnLoading.value = true;
  state.form = form
  getList()
}

const showDevice = (item) => {
  if(item.device_num==0){
    ElMessage.warning('该商家没有关联设备');
    return ;
  }
  deviceDetailRef.value.state.form.client_no = item.client_no
  deviceDetailRef.value.dialogVisible = true;
}

const getList = async () => {
  loadingData.value = true;
  const res = await merchantList({ ...state.searchLimit, ...state.form })
  if (res.code === 1000) {
    tableData.value = res.data.listData.list
    state.count = res.data.listData.count
  }
  btnLoading.value = false;
  loadingData.value = false;
}

const pageChange = (page) => {
  state.searchLimit.page = page
  getList()
}

watchEffect(() => {
  if (merchantFormRef.value) {
    status_list.value = merchantFormRef.value.state.status;
  }
})

// life cycle
onBeforeMount(() => {
  getList()
})

</script>
<style lang="less" scoped>
.table-box {
  margin: 0 20px;

  .device-num {
    cursor: pointer;
  }
}

.page {
  margin: 20px;
}

.add {
  margin: -20px 20px 20px;
}</style>